<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" id="input" />
    <script>
      let oInput = document.querySelector('#input')
      function log(e) {
        console.log(this, e)
      }
      oInput.oninput = outset(log, 500)

      //封装防抖函数
      function outset(centent, time) {
        let timeout = null
        return function (e) {
          clearTimeout(timeout)
          timeout = setTimeout(() => {
            // 注意其中this的指向,其中返回的函数才是绑定到节点事件上的函数
            // 其中存在this以及e
            // 而真正使用的函数中没有this,所以需要使用call修改this指向
            log.call(this, e)
          }, time)
        }
      }
    </script>
  </body>
</html>
